<template>
    <div class="selectgame">
        <div class="fram">
            <button class="custom-btn btn-13" @click="snake_game" type="button">贪吃蛇</button>
            <button class="custom-btn btn-14" id="gobang" @click="gobang">五子棋</button>
        </div>
    </div>
</template>

<script>
import { useStore } from 'vuex'
export default {
    
    setup(){
        const store=useStore();
        const snake_game=()=>{
            store.commit("updateStatus","matching");
        };
        const gobang=()=>{
            store.commit("updateStatus","gobang");
    
        };
        return{
            snake_game,
            gobang
        }
    }
}
</script>
<style scoped>
div.selectgame {
    width: 60vw;
    height: 70vh;
    margin: 40px auto;
    background-color: rgba(146, 132, 181, 0.5);
}

.frame {
    width: 90%;
    margin: 40px auto;
    text-align: center;
}

button {
    margin: 20px;
}

 .custom-btn {
      width: 130px;
      height: 40px;
      color: #fff;
      border-radius: 5px;
      padding: 10px 25px;
      font-family: 'Lato', sans-serif;
      font-weight: 500;
      background: transparent;
      cursor: pointer;
      transition: all 0.3s ease;
      position: relative;
      display: inline-block;
      box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, .5), 7px 7px 20px 0px rgba(0, 0, 0, .1), 4px 4px 5px 0px rgba(0, 0, 0, .1);
      outline: none;
    }


/* 贪吃蛇按钮效果 */

.btn-13 {
    background-color: #89d8d3;
    background-image: linear-gradient(315deg, #89d8d3 0%, #03c8a8 74%);
    border: none;
    z-index: 1;
}

.btn-13:after {
    position: absolute;
    content: "";
    width: 100%;
    height: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    border-radius: 5px;
    background-color: #4dccc6;
    background-image: linear-gradient(315deg, #4dccc6 0%, #96e4df 74%);
    box-shadow: -7px -7px 20px 0px #fff9, -4px -4px 5px 0px #fff9, 7px 7px 20px 0px #0002, 4px 4px 5px 0px #0001;
    transition: all 0.3s ease;
}

.btn-13:hover {
    color: #fff;
}

.btn-13:hover:after {
    top: 0;
    height: 100%;
}

.btn-13:active {
    top: 2px;
}

/*五子棋按钮效果 */
.btn-14 {
    background: rgb(255, 151, 0);
    border: none;
    z-index: 1;
}

.btn-14:after {
    position: absolute;
    content: "";
    width: 100%;
    height: 0;
    top: 0;
    left: 0;
    z-index: -1;
    border-radius: 5px;
    background-color: #eaf818;
    background-image: linear-gradient(315deg, #eaf818 0%, #f6fc9c 74%);
    box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, .5) 7px 7px 20px 0px rgba(0, 0, 0, .1),
        4px 4px 5px 0px rgba(0, 0, 0, .1);
    transition: all 0.3s ease;
}

.btn-14:hover {
    color: #000;
}

.btn-14:hover:after {
    top: auto;
    bottom: 0;
    height: 100%;
}

.btn-14:active {
    top: 2px;
}
</style>